<template>
  <div>
    <el-dialog
      :title="
        type === 3 ? $t('fiat.fundCodeSetting') : $t('fiat.merchantSetting')
      "
      @close="cancer"
      append-to-body
      v-model="state.dialogVisible"
      width="400px"
    >
      <div class="text-left p_30">
        <el-form
          ref="ruleForm"
          :model="state.MerchantParam"
          :rules="state.rules"
          class="demo-ruleForm "
        >
          <div class="method-box">
            <div v-if="type === 1 || type === 2">
              <el-form-item
                style="margin-bottom:8px"
                :label="$t('fiat.merchantName')"
              >
                <el-input
                  :minlength="4"
                  :maxlength="16"
                  v-model="state.MerchantParam.tenant_name"
                  :placeholder="$t('fiat.pleaseMerchantName')"
                ></el-input>
              </el-form-item>
              <div class="text-12 text-login">
                {{ $t("fiat.merchantNameVerification") }}
              </div>
            </div>
            <div v-if="type === 1 || type === 3">
              <el-form-item
                class="mb-12"
                :label="$t('fiat.fundCode')"
                prop="user_fund_password"
              >
                <el-input
                  show-password
                  type="password"
                  :maxlength="6"
                  v-model="state.MerchantParam.user_fund_password"
                  :placeholder="$t('fiat.enterSixDigitNumber')"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="mb-12"
                :label="$t('formTip.comfirmPass')"
                prop="user_confirm_fund_password"
              >
                <el-input
                  show-password
                  type="password"
                  :maxlength="6"
                  v-model="state.MerchantParam.user_confirm_fund_password"
                  :placeholder="$t('formTip.newLoginPassTip')"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item style="margin-bottom:0px;margin-top:30px;">
              <div class="flex js-sp buble-t1">
                <div class="letter-btn text-center nobtn point" @click="cancer">
                  {{ $t("formTip.cancel") }}
                </div>
                <div
                  class="letter-btn acbtn point text-center"
                  @click="confirm"
                >
                  {{ $t("global.setting") }}
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
export default {
  props: {
    dialog: Boolean,
    type: Number, //1,商户设置（都无）2、商户设置（无商户名）3,资金密码设置
  },
  emits: ["onconfirm", "oncancer"],
  setup(props, { emit }) {
    const { t } = useI18n();
    var Password = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("*" + t("fiat.enterFundCode")));
      } else {
        let reg = /^[0-9]{6}$/;
        if (!reg.test(value)) {
          callback(new Error("*" + t("fiat.enterSixDigitNumber")));
        } else {
          callback();
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("*" + t("formTip.newPassComfirm")));
      } else {
        if (state.MerchantParam.user_fund_password !== value) {
          callback(new Error("*" + t("formTip.passDifTip")));
        } else {
          callback();
        }
      }
    };
    const state = reactive({
      dialogVisible: props.dialog,
      MerchantParam: {},
      rules: {
        user_fund_password: [
          {
            validator: Password,
            trigger: "blur",
          },
        ],
        user_confirm_fund_password: [
          { validator: validatePass, trigger: "blur" },
        ],
      },
    });

    const ruleForm = ref();
    watch(props, (val) => {
      state.dialogVisible = val.dialog;
    });
    const cancer = () => {
      ruleForm.value.resetFields();
      state.dialogVisible = false;
      emit("oncancer");
    };
    const confirm = () => {
      ruleForm.value.validate((valid) => {
        if (valid) {
          let obj = {
            old_user_fund_password: state.MerchantParam.user_fund_password,
            user_confirm_fund_password:
              state.MerchantParam.user_confirm_fund_password,
            user_fund_password: state.MerchantParam.user_fund_password,
            confirm_user_fund_password:
              state.MerchantParam.user_confirm_fund_password,
          };
          if (props.type === 1 || props.type === 2) {
            obj.tenant_name = state.MerchantParam.tenant_name;
          }
          emit("onconfirm", obj);
        } else {
          console.log("submit error");
        }
      });
    };
    return {
      state,
      confirm,
      cancer,
      validatePass,
      ruleForm,
    };
  },
};
</script>

<style lang="less" scoped>
.letter-tip {
  width: 100%;
  padding: 14px 20px;
  box-sizing: border-box;
}
.letter-btn {
  width: 160px;
  height: 46px;
  line-height: 46px;
  border-radius: 4px;
}
.mb-24 {
  margin-bottom: 24px;
}
.color-1e {
  color: #121212;
}
.color-98 {
  color: #989898;
}
.p_30 {
  padding: 14px 20px;
}
.mb-12 {
  margin-bottom: 12px;
}
.method-box:deep(.el-input__inner) {
  border: none;
  background: #f8f8f8;
  width: 100%;
  .el-input-group__append {
    border: none;
  }
}
.method-box:deep(.el-form-item__label) {
  color: #888;
}
.method-box:deep(.el-input-group__append) {
  width: 30px;
  border: none;
  padding-inline-end: 20px;
  background: #f8f8f8;
}
.is-rtl .method-box:deep(.el-form-item__label) {
  float: right;
}
</style>
